<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CodeMirror Demo</title>
    <!--下面两个是使用Code Mirror必须引入的-->
    <link rel="stylesheet" href="css/codemirror.min.css">
    <script src="js/codemirror.min.js" type="text/javascript" charset="utf-8"></script>
    <!--Java代码高亮必须引入-->
    <script src="js/mode/clike.min.js" type="text/javascript" charset="utf-8"></script>
    <!--主题-->
    <link rel="stylesheet" href="css/theme/idea.min.css">
    <!--括号匹配-->
    <script src="js/matchbrackets.min.js" type="text/javascript" charset="utf-8"></script>

    <!--支持代码折叠-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldcode.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/brace-fold.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/comment-fold.min.js" type="text/javascript" charset="utf-8"></script>

    <style>
        *{
            padding:0px;
            margin:0px;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        .CodeMirror {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <textarea id="code"></textarea>
<script>
    // CodeMirror 版本：6.65.7

    var editor = CodeMirror.fromTextArea(document.getElementById("code"),{
        // 实现Java代码高亮
        mode:"text/x-java",
        // 显示行号
        lineNumbers:true,
        // 主题
        theme:"idea",
        // 括号匹配
        matchBrackets:true,
        // 只读
        readOnly: false,
        // 是否在初始化时自动获取焦点
        autofocus: true,
        // 代码折叠
        lineWrapping:true,
        foldGutter: true,
        gutters:["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
    });

    // 设置内容
    function setEditorValue(value){
        editor.setValue(value);
    }

    // 获取内容
    function getEditorValue(value){
        return editor.getValue();
    }
</script>
</body>
</html>